const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')

const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const {
  CleanWebpackPlugin
} = require('clean-webpack-plugin');

const TerserJSplugin = require('terser-webpack-plugin')

const {
  VueLoaderPlugin
} = require('vue-loader')

module.exports = (env, argv) => {
  return {
    entry: "./src/index.js",
    mode: argv.mode, // development环境才有热更新
    // target: 'web', // webpack5
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].[hash].js'
    },
    module: {
      rules: [{
          test: /\.vue$/,
          loader: 'vue-loader'
        },
        {
          test: /\.css$/,
          use: [
            argv.mode === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
            {
              loader: 'css-loader',
              options: {
                import: true,
                url: true
              }
            },
          ]
        }
      ]
    },
    plugins: [
      new CleanWebpackPlugin(),
      new VueLoaderPlugin(),
      new HtmlWebpackPlugin({
        template: './public/index.html'
      }),
      new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css',
      }),
    ],
    optimization: {
      splitChunks: {
        chunks: 'all',
        usedExports: true,
      },
      minimizer: [
        new TerserJSplugin({})
      ]
    },
  }
}